import React, { FC, useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import Header from '@/components/home/header'
import Loading from '@/components/home/loading/saleLoading'
import BtnGroup from '@/components/changeCourse/btnGroup'
import { customToast } from '@/components/customToast/index'
import { useAppDispatch } from '@/store'
import { setChangeSuccess } from '@/store/changeCourse'
import { getQueryVariable } from '@/utils/http'
import { checkSaveChangeStuPlan, saveChangeStuPlan } from '@/api/changeCourse'
import { CheckSaveRes, PlanInfoItem } from '@/types/changeCourse'
import iconChange from '@/assets/images/icon_change.png'

interface PlanParam {
  current: boolean
  item: PlanInfoItem
}
const ConfirmPlanItem: FC<PlanParam> = (props) => {
  const { item, current } = props
  return (
    <div
      className={
        'bg-white rounded-r0.8 relative overflow-hidden shadow-bs5 ' +
        (current
          ? 'opacity-60 py-r2.4 px-r1.3'
          : 'opacity-100 py-r2.3 px-r1.2 border border-red-FF3627')
      }
    >
      <div
        className={
          'rounded-bl-r1.6  px-r1.6 text-r2.2 leading-r4.0 text-center absolute right-0 top-0 text-white font-medium font-medium-family scale-50 origin-top-right ' +
          (current ? 'opacity-60 bg-gray-999999' : ' bg-red-FF3627 shadow-bs6')
        }
      >
        {current ? '原讲次' : '新讲次'}
      </div>
      <div className="text-r1.4 -mt-r0.2 leading-r1.8 text-gray-333333 line-clamp-2 font-medium-family">
        {item.dateDesc}
      </div>
      <div className="mt-r1.0">
        <div className="flex text-r1.2 overflow-x-auto leading-r1.2 no-scrollbar text-gray-666666">
          {item.teacherInfo.map((val, index) => (
            <div
              key={index}
              className="mr-r2.4 flex-shrink-0 truncate"
              style={{ maxWidth: '9.0rem' }}
            >
              <span>授课: </span>
              <span>{val.name || '老师'}</span>
            </div>
          ))}
          {item.counselorInfo.map((val, index) => (
            <div
              key={index}
              className="mr-r2.4 flex-shrink-0 truncate"
              style={{ maxWidth: '9.0rem' }}
            >
              <span>班主任: </span>
              <span>{val.name || '老师'}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
const confirmPlan: FC<{}> = () => {
  const navigate = useNavigate()
  const stuCouId = getQueryVariable('stuCouId')
  const newPlanId = getQueryVariable('newPlanId')
  const planId = getQueryVariable('planId')
  if (!(stuCouId && newPlanId && planId)) {
    navigate('/404')
    return <></>
  }
  const dispatch = useAppDispatch()
  const [loading, setLoading] = useState(false)
  const [btnLoading, setBtnLoading] = useState(false)
  const [confirmPlanData, setConfirmPlanData] = useState<CheckSaveRes>()
  useEffect(() => {
    setLoading(true)
    checkSaveChangeStuPlan({
      stuCouId: stuCouId,
      newPlanId: newPlanId,
      planId: planId,
    }).then((res) => {
      setLoading(false)
      if (res.result.data.status == 1) {
        setConfirmPlanData(res.result.data.data)
      } else {
        customToast({ className: 'custom_toast_normal', text: res.result.data.msg, duration: 2000 })
      }
    })
  }, [])
  const confirmFun = async () => {
    setBtnLoading(true)
    saveChangeStuPlan({
      stuCouId: stuCouId,
      newPlanId: newPlanId,
      planId: planId,
    }).then((res) => {
      setBtnLoading(false)
      if (res.result.data.status === 1) {
        dispatch(setChangeSuccess(res.result.data))
        navigate('/success')
      }
    })
  }
  return (
    <div className="w-full h-full min-h-screen bg-gray-F7F7F8 font-normal font-regular">
      <Header
        cb={() => {
          navigate(-1)
        }}
        headerText={'调讲确认'}
        headerColor="bg-white"
        notHeaderColor={false}
      ></Header>
      {loading ? <Loading noBorder={true} modal={true}></Loading> : null}
      {confirmPlanData && (
        <div className="w-full">
          <h3 className="text-r1.6 leading-r2.2 font-medium-family mb-0 bg-white px-r1.6 py-r2.1 line-clamp-2 overflow-hidden rounded-b-r1.2">
            {confirmPlanData?.currentPlanInfo.planName}
          </h3>
          <div className="px-r1.2 mt-r1.2">
            {confirmPlanData?.currentPlanInfo && (
              <ConfirmPlanItem
                current={true}
                item={confirmPlanData?.currentPlanInfo}
              ></ConfirmPlanItem>
            )}
            <div className="text-red-FF3627 text-r1.3 text-center leading-r1.4 my-r0.8 font-medium font-medium-family">
              <img
                alt=""
                src={iconChange}
                className="w-r1.4 h-r1.4 inline-block align-top mr-r0.4"
              />
              <span>调整</span>
            </div>
            {confirmPlanData?.targetPlanInfo && (
              <ConfirmPlanItem
                current={false}
                item={confirmPlanData?.targetPlanInfo}
              ></ConfirmPlanItem>
            )}
          </div>
          <BtnGroup
            text="确认调换"
            showLeft={false}
            disabled={btnLoading}
            loading={btnLoading}
            btnClick={() => confirmFun()}
          ></BtnGroup>
        </div>
      )}
    </div>
  )
}

export default confirmPlan
